<div class="main-content">
	<div class="main-content-inner">
		<div class="breadcrumbs" id="breadcrumbs">
			<ul class="breadcrumb">
				<li><i class="ace-icon fa fa-home home-icon"></i> <a href="">首页</a></li>
				<li class="active">全部设备</li>
			</ul>
		</div>
		<!--内容部分 -->
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
					<div class="clearfix"></div>
					<div>
						<div id="dynamic-table_wrapper"
							class="dataTables_wrapper form-inline no-footer">
							<div class="row" style="height: 50px;">
									<div class="nav-search col-xs-7" >
										<span class="input-icon" style="float: right;">
											<button onclick="getAllItemsInfo(1);" type="button"  class="btn btn-info btn-sm" style="float: right;">
											查询
											</button>
										</span>
										<span class="input-icon" style="float: right;"> <input
											style="float: left;" type="text" placeholder="关键字查询 "
											class="nav-search-input" onkeyup="getAllItemsInfo(1)"
											id="search_input" autocomplete="off"> <i
											class="ace-icon fa fa-search nav-search-icon"></i>
										</span>
										<span class="input-icon" style="float: right;"> 
											<input class="nav-search-input" placeholder="截止日期"
													id="LAY_demorange_e" >
										</span>
										<span class="input-icon" style="float: right;"> 
											<input class="nav-search-input" placeholder="开始日期"
													id="LAY_demorange_s" >
										</span>
								  </div>
							</div>
							<table
								class="table table-striped table-bordered table-hover dataTable no-footer DTTT_selectable"
								id="dynamic-table" role="grid"
								aria-describedby="dynamic-table_info">
								<thead>
									<tr>
										<th class="col-xs-1">设备编号</th>
										<th class="col-xs-1">设备名称</th>
										<th class="col-xs-1">类别</th>
										<th class="col-xs-1">型号</th>
										<th class="col-xs-1">规格</th>
										<th class="col-xs-1">
											设备状态
											<select name="interest" onchange="getAllItemsInfo(1);" id="status_select" lay-filter="aihao">
												<option value="-2">全部</option>
												<option value="1">新添</option>
												<option value="2">待修</option>
												<option value="3">报废</option>
											</select>
										</th>
										<th class="col-xs-1">创建时间</th>
									</tr>
								</thead>
								<tbody id="itemsPage">
								</tbody>
							</table>
							<!-- 分页 -->
							<hr>
							<div id="page5" style="float: right;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 全部设备信息查看 -->
<script type="text/javascript">

getAllItemsInfo(1); // 初始加载数据

/**
 * 获取全部设备信息
 */
function getAllItemsInfo(curr) {
	var sTime = $("#LAY_demorange_s").val(); // 获取起始时间 
	var eTime = $("#LAY_demorange_e").val(); // 获取终止时间
	var search = $("#search_input").val();  // 获取搜索框中信息
	var status = $("#status_select").val(); // 获取设备状态
	
	var getUrl = "all/allItemsInfo";  // 所有设备信息
	var data = {      // 所需参数
			"curr":curr,
			"size":10,
			"search":search,
			"sTime":sTime,
			"eTime":eTime,
			"status":status
		};
	$.post(getUrl, data, function(resp) {
		pack(resp.list,curr);  // 填充表格数据
		laypage({  // 调用分页
			cont : $('#page5'), // 分页容器。
			pages : resp.totalPage, // 总页数
			skin : '#2283C5',//保持ace中间的样式
			first : 1,
			last : resp.totalPage, //总页数，将尾页显示为总页数
			curr : resp.pageNumber,//当前页
			groups : 5, //连续显示分页数
			jump : function(obj, first) {
				if (!first) { //一定要加此判断，否则初始时会无限刷新
					getAllItemsInfo(obj.curr);
				}
			}
		});
	});
}
/**
 * 循环填充
 */
function pack(data,curr) { // 填充表格数据
	var dataStr = "";
	$.each(data, function(i, v) {
		dataStr += packlist(v,curr);
	});
	$("#itemsPage").html(dataStr);
}
/**
 * 按行填充
 */
function packlist(v,curr) { 
	var dataStr = "";
	dataStr += '<tr>';
	dataStr += '<td>' + v.code + '</td>';
	dataStr += '<td>' + v.name + '</td>';
	dataStr += '<td>' + v.type + '</td>';
	dataStr += '<td>' + v.modelNum + '</td>';
	dataStr += '<td>' + v.norms + '</td>';
	if(v.status==1){
		dataStr += '<td>新添</td>';
	}else if(v.status==2){
		dataStr += '<td>待修</td>';
	}else{
		dataStr += '<td>报废</td>';
	}
	dataStr += '<td>' + v.createTime + '</td>';
	dataStr += '</tr>';
	return dataStr;
};


</script>
<!-- 日期选择器 -->
<script type="text/javascript">
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  var start = {
    min: '1900-01-01 23:59:59'//laydate.now()
    ,max: '2099-06-16 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      end.min = datas; //开始日选好后，重置结束日的最小日期
      end.start = datas //将结束日的初始值设定为开始日
    }
  };
  
  var end = {
    min: '1900-01-01 23:59:59'//laydate.now()
    ,max: '2099-06-16 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      start.max = datas; //结束日选好后，重置开始日的最大日期
    }
  };
  
   document.getElementById('LAY_demorange_s').onclick = function(){
    start.elem = this;
    laydate(start);
  }
  document.getElementById('LAY_demorange_e').onclick = function(){
    end.elem = this
    laydate(end);
  } 
  
});
</script>